<template>
  <div class="component-allotMaterialList">
      <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>
            <span v-if="$route.params.loop==1" ><a @click="$router.go(-2)">库存</a> > <a  @click="$router.go(-1)"> 查看记录</a> >  甲供材料入库 </span>
            <span v-else>甲供材料入库</span>
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
    </div>
    <div  class="container">
      <div>
        <div class="table-title">
          <p>
            <span class="iconfont">&#xe607;</span> 甲供入库信息填写
          </p>
          <div class="btn-group-right" v-if="$route.params.flag == 0">
            <span @click="save">入库</span>
          </div>
        </div>
        <div class="tables">
          <table cellpadding="0" cellspacing="0" border="1">
            <tr>
              <td>甲供单号</td>
              <td>
                <el-input v-model="table.formNo" :disabled="write"></el-input>
              </td>
              <td>领料部门</td>
              <td>
                <el-select :disabled="$route.params.isfrom==0?true:false" v-model="table.orgName" clearable placeholder="请选择领料部门" style="margin-left: -55px;width:320px;">
                  <el-option v-for="(item,index) in options" :key="index" :label="item.orgName" :value="item.orgId"></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td>入库单号</td>
              <td>
                <el-input v-model="table.inOrder" :disabled="write"></el-input>
              </td>
              <td>领料人</td>
              <td>
                <el-input v-model="table.responseUser" :disabled="write"></el-input>
              </td>
            </tr>
            <tr>
              <td>供货商</td>
              <td>
                <el-select :disabled="write" v-model="table.supplierName" clearable placeholder="请选择供货商" @change="selectSupply" style="margin-left: -62px;width:320px;">
                  <el-option v-for="(item,index) in supplyList" :key="index" :label="item.orgName" :value="item.orgId"></el-option>
                </el-select>
              </td>
              <td>入库日期</td>
              <td>
                <div v-if="$route.params.flag == 1">{{table.inDate | timeFilter}}</div>
                <div v-else>
                  <el-date-picker
                  v-model="table.inDate"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                ></el-date-picker>
                </div>
              </td>
            </tr>
            <tr>
              <td>签收单据</td>
              <td>
                <div v-if="$route.params.flag == 0">
                  <el-upload
                    class="upload-demo"
                    action="/api/web/sysFile/uploadFile"
                    :headers="myheader"
                    :data="exe_data"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="successFile"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="1"
                    accept=".jpg,.png,.JPG,.PNG"
                    :before-upload="beforeAvatarUpload"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">上传文件</el-button>
                    <div slot="tip" style="color: #ccc;" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
                  </el-upload>
                </div>
                <div v-else class="pictureLength">
                  <div style="cursor: pointer;" @click="imgFlag = !imgFlag">{{table.fileName}}</div>
                </div>
              </td>
              <td>项目编码</td>
              <td>
                <el-select :disabled="write" v-model="table.toProno" clearable placeholder="选择已建项通过的项目编码(外部)" style="margin-left: -62px;width:320px;">
                  <el-option v-for="(item,index) in codeList" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td>仓储位置</td>
              <td>
                <el-select :disabled="write" v-model="table.storeName" clearable placeholder="请选择仓储位置" style="margin-left: -60px;width:320px;">
                  <el-option v-for="(item,index) in locationList" :key="index" :label="item.storeName" :value="item.storeId"></el-option>
                </el-select>
              </td>
              <td>备注</td>
              <td>
                <el-input v-model="table.remark" :disabled="write"></el-input>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div style="margin-top:20px;">
        <div class="table-title table-titles">
          <p>
            <span class="iconfont">&#xe607;</span> 材料清单
          </p>
          <p v-show="$route.params.flag == 0" @click="addmaterList">+ 添加</p>
        </div>
        <div class="table armorlistTable">
          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            :data="materialList"
            style="width: 1100px;margin:0 auto"
            border
          >
            <el-table-column label="序号" align="center" width="70" type="index"></el-table-column>
            <el-table-column label="器材名称" align="center" prop="matName"></el-table-column>
            <el-table-column label="型号" align="center" prop="matModel"></el-table-column>
            <el-table-column label="设备码" align="center">
              <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.deviceNum" :disabled="write"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" prop="matUnit"></el-table-column>
            <el-table-column label="数量" align="center" width="150">
              <template slot-scope="scope">
                <el-input-number size="small" @input.native="totalMoneys" v-model="scope.row.realNum" controls-position="right" :disabled="write" :min="1"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="单价" align="center" prop="price"></el-table-column>
            <el-table-column label="金额" align="center">
              <template slot-scope="scope">
                <div v-if="isNaN(scope.row.realNum)"></div>
                <div v-else>{{scope.row.realMoney = scope.row.realNum * scope.row.price | numFilter}}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" v-if="$route.params.flag == 0">
              <template slot-scope="scope">
                <a @click="handleCopy(scope.row)" type="text" size="small" class="red">复制</a>
                <a @click="handleCheck(scope.row,scope.$index)" type="text" size="small" class="red">删除</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 1100px;margin-top: 20px;text-align: right;">总计：{{totalCountMoney}} 元</div>
      </div>
    </div>

    <!-- 项目专业弹窗 -->
    <div class="component-model">
      <el-dialog title="选择材料" :visible.sync="dialogVisible" width="800px">
        <div class="input-box">
          <input type="text" style="float:left" v-model="chooseValue" class="model-input" placeholder="请输入关键字">
          <div class="search" style="float:left;margin-bottom: 20px;" @click="findRes">
            <span class="iconfont">&#xe63d;</span>
          </div>
          <div>
           <!-- <span
              class="upload"
              style="
              display:inline-block;
              color:#666;width: 105px;
              height: 30px;
              border: 1px solid #e4e4e4;
              background-color:#fff;
              font-size:14px;
              line-height:30px;
              margin-right:30px;
              margin-top:5px;
              "
              @click="addRadio"
            >+&nbsp;&nbsp;
            材料</span>-->
          </div>
          <div class="checkbox">
            <el-table
              ref="multipleTables"
              :data="checkInfo"
              tooltip-effect="dark"
              style="width:100%"
              border
              :row-key="getRowKey"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" align="center" width="80" :reserve-selection="true"></el-table-column>
              <el-table-column label="器材名称" align="center" width="240" prop="matName"></el-table-column>
              <el-table-column label="型号" align="center" prop="matModel"></el-table-column>
              <el-table-column label="单位" align="center" prop="matUnit"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="component-paging" v-if="checkInfo.length > 0">
              <div class="table-bottom">
                <div class="bottom-left" style="margin-left: 0px;">
                </div>
                <div class="paging">
                  <div class="paging-left">
                    <p>
                      共
                      <span>{{Math.ceil(total/pageSize)}}</span> 页/
                      <span>{{total}}</span> 条数据
                    </p>
                  </div>
                  <el-pagination
                    background
                    @size-change="SizeChange($event,materList,currentPage,pageSize)"
                    @current-change="CurrentChange($event,materList,currentPage,pageSize)"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="addPerson">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="添加材料" :visible.sync="dialogAdd" width="450px" class="component-modelMater" >
        <el-form
          :model="ruleForms"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm addMater"
        >
          <el-form-item label="材料类型:" prop="matType">
            <el-input v-model="ruleForms.matType"></el-input>
          </el-form-item>
          <el-form-item label="材料名称:" prop="matName">
            <el-input v-model="ruleForms.matName"></el-input>
          </el-form-item>
          <el-form-item label="材料型号:" prop="matModel">
            <el-input v-model="ruleForms.matModel"></el-input>
          </el-form-item>
          <el-form-item label="材料单位:" prop="matUnit">
            <el-input v-model="ruleForms.matUnit"></el-input>
          </el-form-item>
          <el-form-item label="参考单价:" prop="price">
            <el-input v-model="ruleForms.price"></el-input>
          </el-form-item>
          <el-form-item label="除税价:" prop="taxExcludingPrice">
            <el-input v-model="ruleForms.taxExcludingPrice"></el-input>
          </el-form-item>
          <el-form-item label="材料主类:" prop="mainType">
            <el-select v-model="ruleForms.mainType" clearable placeholder="请选择材料主类" style="margin-left: 0px;width:310px;">
              <el-option v-for="(item,index) in metarMain" :key="index" :label="item.const_name" :value="item.const_code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <a @click="resetForm('ruleForm')">取消</a>
            <a @click="submitForm('ruleForm')">确定</a>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!--图片预览-->
    <div class="component-model">
      <el-dialog title="预览" :visible.sync="imgFlag" width="600px">
        <img :src="exe_img + table.fileUrl" style="max-width: 500px;">
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myheader:{token:localStorage.getItem("token")},
      buyMoney:0,
      table:{}, // 可编辑表格数据
      option:'',//领料单位
      options:[],//领料单位列表
      supply:'',//供货商
      supplyList:[],//供货商列表
      code:'',//项目编码
      codeList:[],//项目编码列表
      location:'',//仓储位置
      locationList:[],//仓储位置列表
      write: true,// 是否可编辑
      //弹框内容
      checkInfo:[],//材料列表
      total: 2,// 数据总条数
      pageSize: 10,// 每页显示数据的条数
      currentPage: 1,// 当前显示的页面页码
      dialogVisible: false,
      dialogAdd:false,
      modelTitle: "选择材料",
      ruleForms:{
        matType: "",
        matName: "",
        matModel: "",
        matUnit: "",
        price: "",
        taxExcludingPrice:''
      },
      rules:{
        matType: [{ required: true, message: '请输入材料类型', trigger: 'blur' }],
        matName: [{ required: true, message: '请输入材料名称', trigger: 'blur' }],
        matModel: [{ required: true, message: '请输入材料型号', trigger: 'blur' }],
        matUnit: [{ required: true, message: '请输入材料单位', trigger: 'blur' }],
        price: [{ required: true, message: '请输入参考单价', trigger: 'blur' }],
        mainType:[{ required: true, message: '请输入材料主类', trigger: 'change' }],
        taxExcludingPrice:[{ required: true, message: '请输入除税价', trigger: 'change' }]
      },
      multiple:[], //选择材料列表
      materialList:[], //渲染选择材料列表
      multipleSelection:[], //提交时选中的列表
      chooseValue:'',//搜索选择的材料
      imgFlag:false,
      exe_img:img_url,//图片前缀
      exe_data:{'parentId':this.$route.params.inId,'bizType':'project.outStore'},
      fileList: [],
      newArray:{},
      metarMain:[],//材料主类
      delFile:'',//删除文件
    };
  },
  computed:{
    //检测总金额变化
    totalCountMoney() {
      let totalCountMoney = this.totalMoneys();
      return totalCountMoney ? totalCountMoney : 0;
    },
  },
  mounted(){
//     0-入库  1-查看详情
    if(this.$route.params.flag == 1){
      this.initDetail()
    }else{
      this.write = false;
      this.inPro(); //领料单位
      this.selectLocation();//仓储位置
      this.supplyLists();//供应商列表
      this.codeLists();//项目编码
      /*if(this.$route.params.num == 1 && this.$route.params.proNo != undefined){
        this.table.toProid = this.$route.params.proNo;
      }*/
      if(this.$route.params.isfrom == 0){
        this.table.formNo = this.$route.params.billNo;
        this.table.orgName = this.$route.params.orgName;
      }
    }
  },
  methods: {
    //计算总金额
    totalMoneys(){
      let that = this;
      that.buyMoney = 0;
      that.materialList.forEach(function(value, index, array) {
        that.buyMoney += parseFloat(value.price) * parseFloat(value.realNum)
      });
//      console.log(that.buyMoney)
      return that.buyMoney
    },
    //材料主类
    mainTypes(){
      let that = this;
      let suCb = function(res){
        that.metarMain = res.data.data;
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        object:'MaterialClass'
      }
      let palyParam = {
        url: "/api/web/proProject/selectConst",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //领料单位
    inPro(){
      let that = this;
      let suCb = function(res){
        that.options = res.data.data;
        console.log(res.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
      }
      let palyParam = {
        url: "/api/web/proInStore/getAllProAndWork",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //查看详情
    initDetail(){
      let that = this;
      let suCb = function(res){
        that.table = res.data.data.inStore || {};
        that.materialList = res.data.data.matList;
        console.log(res.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        id:that.$route.params.id
      }
      let palyParam = {
        url: "/api/web/proInStore/getInfoBySupplier",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //选择仓储位置
    selectLocation(){
      let that = this;
      let suCb = function(res){
        that.locationList = res.data.data
        console.log(res.data.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let palyParam = {
        url: "/api/web/sysStore/selectStoreName",
        methods:'post',
        data: {},
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //材料添加
    materAdd(){
      let that = this;
      let suCb = function(res){
        that.materList();
        that.dialogAdd = false
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        sysMaterial:that.ruleForms
      }
      let palyParam = {
        url: "/api/web/sysMaterial/insertMaterial",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //点击添加材料
    addmaterList(){
      this.chooseValue = "";
      this.materList();
      this.$nextTick(function () {
        if(this.materialList.length>0){
          this.$refs.multipleTables.clearSelection();
        }
      })
    },
    getRowKey(row){
      return row.matId
    },
    //材料列表
    materList(){
      let that = this;
      let suCb = function(res){
        that.dialogVisible = true;
        that.checkInfo = res.data.data;
        that.total = res.data.rowCount
        console.log(res.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        matName:that.chooseValue,
        pageSize:that.pageSize+"",
        pageCurrent:that.currentPage+"",
        supplyParty:'1'
      }
      let palyParam = {
        url: "/api/web/sysMaterial/selectByMatName",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    // 添加按钮
    addRadio() {
      this.dialogAdd = true;
      this.mainTypes();//材料主类
      this.ruleForms = {
        matType: "",
        matName: "",
        matModel: "",
        matUnit: "",
        price: "",
        mainType:"",
        taxExcludingPrice:''
      }
    },
    //选中添加到页面
    addPerson(){
      this.dialogVisible = false;
      this.materialList = this.materialList.concat(this.multiple);
//      this.materialList = this.multiple;
      let hash = {};
      this.materialList = this.materialList.reduce(function(item, next) {
        hash[next.matId] ? '' : hash[next.matId] = true && item.push(next);
        return item
      }, [])
      this.totalMoneys();
      console.log(this.materialList)
    },
    //材料添加
    submitForm(formName){
      console.log(formName);
      let that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          that.materAdd();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
      this.dialogAdd = false;
    },
    //全选
    handleSelectionChange(val) {
      this.multiple = val
    },
    //搜索
    findRes(){
      this.currentPage = 1;
      this.materList();
    },
    //点击复制
    handleCopy(val){
      let arr = this.deepClone(val);
      this.materialList.push(arr)
    },
    //点击删除
    handleCheck(val,index){
      this.materialList.splice(index,1);
      /*let newArr = this.materialList.filter(item => {
        if(val.matId !== item.matId) {
          return true
        }
      })
      this.materialList = newArr;*/
    },
    //文件上传
    handleRemove(file, fileList) {
      if(file.status == "success") {
        let that = this;
        let suCb = function(res){
          that.fileList = []
        }
        let erCb = function(res){
          console.log(res)
        }
        let postData = {
          parentId:that.$route.params.inId,
          fileUrl:that.delFile
        }
        let palyParam = {
          url: "/api/web/sysFile/deleteFile",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      }else{
        this.fileList = []
      }
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      return true;
//      this.$message.warning(`当前限制选择 1 个文件，请先删除再上传`);
    },
    beforeRemove(file, fileList) {
//      return this.$confirm('确认删除吗？');
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 10MB!');
      }
      return isLt2M;
    },
    successFile(response, file, fileList){
      this.delFile = file.response.fileUrl;
      this.fileList = fileList
    },

    //选中供应商信息
    selectSupply(){
      this.newArray = this.supplyList.find((item) => {
        if(item.orgId === this.table.supplierName){
          return item
        }
      });
      console.log(this.newArray)
    },
    //点击入库函数
    inStore(){
      let newArray = {};
      if(this.$route.params.num == 1 && this.$route.params.proNo != undefined){
          this.table.toProid = this.$route.params.proNo;
          newArray = this.codeList.find((item) => {
            if(item.proNo === this.table.toProid){
              return item
            }
          });
      }
      let that = this;
      let suCb = function(res){
        console.log(res)
        that.$router.push({name:'armor'})
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        orgId: that.$route.params.orgId || that.table.orgName,
        storeId: that.table.storeName,
        inId: that.$route.params.inId,
        applyId:that.$route.params.applyId||"",
        proInStore: {
          inOrder: that.table.inOrder,
          responseUser: that.table.responseUser,
          inDate: that.table.inDate,
          toProid: newArray.proId || that.table.toProid, //项目编码
          toProno:that.table.toProno,
          formNo:that.table.formNo,
          supplier: that.newArray.orgId || that.table.supplierName,
          supplierName:that.newArray.orgName,
          remark:that.table.remark
        },
        proInStoreList:that.materialList
      }
      let palyParam = {
        url: "/api/web/proInStore/addInStoreBySupplier",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //点击入库
    save() {
        console.log(this.table)
      if(this.table.formNo==""||this.table.formNo==undefined||this.table.orgName==""||this.table.orgName==undefined||this.table.inOrder==""||this.table.inOrder==undefined||this.table.responseUser==""||this.table.responseUser==undefined||this.table.supplierName==""||this.table.supplierName==undefined||this.table.inDate==""||this.table.inDate==undefined||this.table.toProno==""||this.table.toProno==undefined||this.table.storeName==""||this.table.storeName==undefined||this.fileList.length == 0||this.materialList.length==0){
        this.$alert('填写信息有空值', '提示', {
          confirmButtonText: '确定',
        });
      }else{
         for(let i in this.materialList){
            if(this.materialList[i].realNum == undefined || this.materialList[i].realNum == ''){
              this.$alert('材料清单中数量不能为空', '提示', {
                confirmButtonText: '确定',
              });
              return false
            }
         }
        this.inStore();
      }
    },
    //供应商列表
    supplyLists(){
      let that = this;
      let suCb = function(res){
        that.supplyList = res.data.data
        console.log(res.data.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
      }
      let palyParam = {
        url: "/api/web/proInStore/getorgIdSupplier",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //项目编码列表
    codeLists(){
      let that = this;
      let suCb = function(res){
        that.codeList = res.data.data;
        console.log(res.data.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
      }
      let palyParam = {
        url: "/api/web/sysMaterial/getProNoByOrgId",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    }

  }
};
</script>

<style scoped>
.container {
  width: 1100px;
  margin: 30px auto;
}
.table-titles{
  overflow: hidden;
  background: #F3F3F3;
  border:1px solid #E4E4E4;
  border-bottom: none;
  padding: 0 10px;
}
.table-titles p:first-of-type{
  float: left;
}
.table-titles p:last-of-type{
  float: right;
  border:1px solid #ccc;
  background: #fff;
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  margin-top: 5px;
  cursor: pointer;
}
.table-title p {
  font-family: "PingFangSC-Regular", "PingFang SC";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  font-size: 16px;
  color: #666;
  text-align: left;
  line-height: 40px;
}

.tables table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
}
.tables table td:nth-of-type(2n + 1) {
  text-align: right;
  padding-right: 20px;
  width: 140px;
  background: #f9fafc;
}

.table-title > div:last-of-type {
  float: right;
  margin: -45px 20px 10px;
}
.table-title > div:last-of-type span {
  display: inline-block;
  margin-left: 20px;
  padding: 5px 20px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 4px;
}
.table-title > div:last-of-type span:first-of-type {
  border: 1px solid #e4e4e4;
  color: #666;
  background: #fff;
}
.table-title > div:last-of-type span:last-of-type {
  border: 1px solid #1abc9c;
  color: #fff;
  background: #1abc9c;
}

.uploadBtn{
    height: 26px;
    line-height: 26px;
    margin: 7px;
    width: 90px;
    color: #1abc9c;
    border: 1px solid #1abc9c;
    background-color: #fff;
}
.uploadBtn:hover{
    color: #fff;
    background-color: #1abc9c;
}
  a{
    color: #1ABC9C;
    cursor: pointer;
  }
/* 弹窗样式 */
.model-input {
  width: 190px;
  height: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  color: #ccc;
}
.search {
  width: 40px;
  height: 30px;
  border: 1px solid #ccc;
  border-left: none;
  line-height: 30px;
  background-color: #ccc;
}
.search:hover {
  cursor: pointer;
}

.radio-group {
  padding-top: 30px;
  padding-left: 30px;
}

.radio-group .el-radio {
  height: 30px;
}

.addpro {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #ccc;
}
.addpro:hover {
  cursor: pointer;
}

.upload:hover {
  cursor: pointer;
}

.btn-search {
  display: inline-block;
  float: right;
  width: 80px;
  height: 40px;
  background-color: #1abc9a;
  margin-top: 50px;
  color: #fff;
  border-radius: 5px;
  font-size: 15px;
  line-height: 40px;
}
.btn-search:hover {
  cursor: pointer;
}

.el-table .cell a {
  color: #1abc9a;
  text-decoration: none;
  cursor: pointer;
}
.checkbox{
  text-align: left;
  margin: 20px 0;
}
.component-paging .table-bottom{
  width: 102% !important;
  margin-top: 30px;
  border:none;
}

</style>
